// Three.js Plugin 使用示例
import { Base } from '@code-editor/three'
import { createBox, createSphere, addLight } from '@code-editor/three'

class ThreeDemo extends Base {
  constructor() {
    super()
    this.objects = []
  }

  initGui() {
    // 添加GUI控制
    const gui = this.gui
    
    // 添加一个文件夹
    const sceneFolder = gui.addFolder('Scene')
    
    // 控制背景色
    const backgroundColor = { color: '#000000' }
    sceneFolder.addColor(backgroundColor, 'color').onChange((value) => {
      this.scene.background = new THREE.Color(value)
    })
    
    // 控制相机位置
    const cameraFolder = gui.addFolder('Camera')
    cameraFolder.add(this.camera.position, 'x', -100, 100).name('Position X')
    cameraFolder.add(this.camera.position, 'y', -100, 100).name('Position Y')
    cameraFolder.add(this.camera.position, 'z', -100, 100).name('Position Z')
    
    // 控制对象
    const objectsFolder = gui.addFolder('Objects')
    objectsFolder.add({ addBox: () => this.addBox() }, 'addBox').name('Add Box')
    objectsFolder.add({ addSphere: () => this.addSphere() }, 'addSphere').name('Add Sphere')
    objectsFolder.add({ clear: () => this.clearObjects() }, 'clear').name('Clear All')
  }

  addBox() {
    const box = createBox(2, 2, 2, 0x00ff00)
    box.position.set(
      (Math.random() - 0.5) * 10,
      (Math.random() - 0.5) * 10,
      (Math.random() - 0.5) * 10
    )
    this.scene.add(box)
    this.objects.push(box)
  }

  addSphere() {
    const sphere = createSphere(1, 0xff0000)
    sphere.position.set(
      (Math.random() - 0.5) * 10,
      (Math.random() - 0.5) * 10,
      (Math.random() - 0.5) * 10
    )
    this.scene.add(sphere)
    this.objects.push(sphere)
  }

  clearObjects() {
    this.objects.forEach(obj => {
      this.scene.remove(obj)
    })
    this.objects = []
  }

  renderContent() {
    // 旋转所有对象
    this.objects.forEach(obj => {
      obj.rotation.x += 0.01
      obj.rotation.y += 0.01
    })
  }
}

// 导出示例类
export default ThreeDemo

// 如果直接运行此文件，则创建实例
if (typeof window !== 'undefined') {
  window.addEventListener('load', () => {
    const container = document.getElementById('three-container') || document.body
    const demo = new ThreeDemo()
    demo.init(container)
    
    // 添加一些初始对象
    demo.addBox()
    demo.addSphere()
    
    // 添加光源
    addLight(demo.scene, 'ambient')
    addLight(demo.scene, 'directional')
    
    console.log('Three.js Demo initialized!')
  })
} 